import '../../../node_modules/antd/dist/antd.css';
import React, { Component } from 'react';
import {Link, IndexLink, hashHistory} from "react-router";

import { Upload, Icon, Modal,message } from 'antd';

class PicturesWall extends React.Component {
  constructor(props){
    super(props)
  }
  state = {
    previewVisible: false,
    previewImage: '',
    fileList: [],
    type:this.props.text 
  };

  handleCancel = () => this.setState({ previewVisible: false })

  handlePreview = (file) => {
    console.log(file)
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  }

  handleChange = ({file,fileList}) => {

    this.setState({
      fileList,

    })
    this.props.getMainImage ? this.props.getMainImage(file) : this.props.getDetailImage(file)
  }
 
  beforeUpload=(file, fileList1) => false
  render() {
    const { previewVisible, previewImage, fileList } = this.state;
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    return (
      <div className="clearfix">
        <Upload
          action="//jsonplaceholder.typicode.com/posts/"
          listType="picture-card"
          fileList={this.state.fileList}
          onPreview={this.handlePreview}
          onChange={this.handleChange}
          beforeUpload={this.beforeUpload}
        >
        {this.state.type=="limit" ? (fileList.length >= 3 ? null : uploadButton) :(fileList.length >= 1 ? null : uploadButton)}
        </Upload>
        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </div>
    );
  }
}

// ReactDOM.render(<PicturesWall />, mountNode);
export default PicturesWall